 @charset "UTf-8";

@import "common/_reset";
@import "common/_common";
body{
//  &:target #bg{
//      left: -5000px;
//  }
     &:hover #bg{
        left: -9999px;
    }
    #bg{
        background:url(../img/background/foreground.png),
        url(../img/background/midground.png),
        url(../img/background/background.png);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height:1520px;
        transition: left 300s linear; 
        vertical-align: baseline;
    }
    .warp{
          width:90%;
//              min-width: 50%;
                height:1520px;
                margin: 0 auto;
//             background-color:white;
                opacity: 0.95;
                padding:20px 50px 0px;
                
                
                header{
                    width: 100%;
                    vertical-align: middle;
                    position: relative;
                    .header_bg{
                        background-color: gray;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                  .officia_icon{
                        height: 80px;
                        float: left;
                       
                      
                    }
                    .pang_menu{
                        float: right;
                        ul{
                            
                            li{
                                float: left;
                                margin-left: 60px;
                                &:nth-of-type(5){
                                    a:hover{
                                        color: #0099FF;
                                        box-shadow: none !important;
                                    }
                                }
                                 .iconfont{
                                    color: white;
                                    font-size: 40px;
                                    &:hover{
                                        color: #0099FF;
                                    }
                                } 
                                
                                a{  
                                    font-size: 33px;
                                    color:white;
                                    display: block;
                                    padding: 10px;
                                    text-align: center;
                                    width: 152px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    opacity: 0.95;
                                    -webkit-transition:-webkit-box-shadow 0.5s ease-out;
                                    &:hover{
                                        
                                        box-shadow: 0px 0px 15px #0099ff;
                                    }
                                    
                                    span{
                                        font-size: 20px;
                                        margin-top: 7px;
                                        color: #838383;
                                        display: block;
                                        overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .pang_weixin{
                        float: right;
                        width: 50px;
                        margin-left: 60px;
                       
                    }
                }
                nav{
                    position: relative;
                    width: 100%;
                    height: 699px;
                    background: url(../img/gamepage/gamepage_bg.png)
                     no-repeat bottom ;
                     background-size: 100% 40%;
                    .nav_bg{
                        background-color: gray;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                    .ipone6{
                        float: left;
                        padding-top:78px;
                        margin-left: 266px;
                        width:266px;
                        height: 554px;
                        overflow: hidden;
                        img{
                             max-height: 100%;
                        }
                    }
                    .gamepage_content{
                        float: right;
                        ul:nth-of-type(1){
                            width: 507px;
                            margin: 100px 460px 0 0;
                            li:nth-of-type(1){
                                width: 40px;
                                height: 10px;
                                background-color: #ffd205;
                                border-radius:25px ;
                                margin: 0 auto;
                                margin-bottom: 20px;
                                
                            }
                            li:nth-of-type(2){
                                font-size: 32px;
                                text-align: center;
                                margin-bottom: 20px;
                            }
                            li:nth-of-type(3){
                                font-size: 12px;
                                color: #535556;
                                width: 507px;
                               margin: 0 auto;
                            }
                           
                        }
                        ul:nth-of-type(2){
                            margin-top: 20px;
                            li:nth-of-type(1){
                                width: 96px;
                                height: 38px;
                                border: 1px solid black;
                                border-radius: 25px;
                                font-size: 16.15px;
                                float: left;
                                margin-left: 90px;
                                margin-right: 10px;
                                text-align: center;
                                line-height: 38px;
                                vertical-align: middle;
                                a{
                                    color: black;
                                    &:hover{
                                        color: white;
                                    }  
                                    
                                }
                            }
                            li:nth-of-type(2){
                                width: 120px;
                                height: 38px;
                                border: 1px solid black;
                                border-radius: 25px;
                                float: left;
                                 margin-right: 10px;
                                 text-align: center;
                                line-height: 38px;
                                vertical-align: middle;
                                 a{
                                    color: black;
                                    &:hover{
                                        color: white;
                                    }  
                                    
                                }
                            }
                            li:nth-of-type(3){
                                 width: 96px;
                                height: 38px;
                                border: 1px solid black;
                                border-radius: 25px;
                                font-size: 16.15px;
                                float: left;
                                text-align: center;
                                line-height: 38px;
                                vertical-align: middle;
                                 a{
                                    color: black;
                                    &:hover{
                                        color: white;
                                    }  
                                    
                                }
                            }
                        }
                    }
                    .lalal{
                       
                    ul{
                       width: 600px;
                       position: absolute;
                       right: 300px;
                       bottom: 150px;
                       color: white;
                       font-size: 18px;
                       text-align: center;
                        li:nth-of-type(1){
                           float: left;
                            .yuanxing{
                                margin: 0 auto;
                                border: 1px solid white;
                                width: 55px;
                                height: 55px;
                                border-radius: 50px;
                                line-height: 55px;
                                vertical-align: middle;
                            }
                            span{
                                display: block;
                            }
                        }
                         li:nth-of-type(2){
                             float: left;
                             margin-left: 40px;
                              .yuanxing{
                                margin: 0 auto;
                                border: 1px solid white;
                                width: 55px;
                                height: 55px;
                                border-radius: 50px;
                                line-height: 55px;
                                vertical-align: middle;
                            }
                             span{
                                display: block;
                            }
                        }
                         li:nth-of-type(3){
                            float: left;
                             margin-left: 40px;
                             .yuanxing{
                                 margin: 0 auto;
                                border: 1px solid white;
                                width: 55px;
                                height: 55px;
                                border-radius: 50px;
                                line-height: 55px;
                                vertical-align: middle;
                            }
                            span{
                                display: block;
                            }
                        }
                         li:nth-of-type(4){
                             float: left;
                              margin-left: 40px;
                              .yuanxing{
                                  margin: 0 auto;
                                border: 1px solid white;
                                width: 55px;
                                height: 55px;
                                border-radius: 50px;
                                line-height: 55px;
                                vertical-align: middle;
                            }
                             span{
                                display: block;
                            }
                        }
                    }
                    }
                }
                section{
                    width: 100%;
                    height: 700px;
                    overflow: hidden;
                    position: relative;
                    .section_bg{
                        background-color: gray;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                    .gamepage_content{
                        width:507px ;
                        margin: 0 auto;
                        margin-top: 88px;
                        ul:nth-of-type(1){
                            width: 507px;
                           
                            li:nth-of-type(1){
                                width: 40px;
                                height: 10px;
                                background-color: #ffd205;
                                border-radius:25px ;
                                margin: 0 auto;
                                margin-bottom: 20px;
                                
                            }
                            li:nth-of-type(2){
                                font-size: 32px;
                                text-align: center;
                                margin-bottom: 20px;
                                span{
                                    display: block;
                                    font-size: 14px;
                                }
                            }
                            li:nth-of-type(3){
                                font-size: 12px;
                                color: #535556;
                                width: 507px;
                               margin: 0 auto;
                            }
                           
                        }
                        
                    }
                    .tupp{
                         width: 756px;
                         margin: 0 auto;
                         
                         white-space: nowrap;
                        ul:nth-of-type(1){
                            li:nth-of-type(1){
                                float: left;
                                margin-right: 150px;
                            }
                            li:nth-of-type(2){
                                float: left;
                                margin-right: 150px;
                            }
                            li:nth-of-type(3){
                                float: left;
                                img{
                                    display: block;
                                    margin-top: 40px;
                                }
                            }
                        }
                        ul:nth-of-type(2) {
                width: 807px;
                margin: 0 auto;
                margin-top: 30px;
                line-height: 50px;
                overflow: hidden;
                li {
                    float: left;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 22px;
                    &:nth-of-type(2) {
                        margin-left: 140px;
                    }
                    &:nth-of-type(3) {
                        
                        margin-left: 130px;
                    }
                    span {
                        text-align: center;
                        display: block;
                        font-size: 14px;
                        color: #939597;
                    }
                }
            } 
                    }
                     footer{
                    .foot{
                        width: 100%;
                        height: 80px;
                        background-color: #09cdd0;
                        margin-top: 125px;
                        position: relative;
                        color: white;
                        font-size: 12px;
                        text-align: center;
                        line-height: 80px;
                        vertical-align: middle;
                        img:nth-of-type(1){
                            position: absolute;
                            left: 0;
                            bottom: 0;
                        }
                        img:nth-of-type(2){
                            position: absolute;
                            right: 0;
                            bottom: 0;
                        }
                    }
                }
                    
                }
    }
}
